// 自动回复页面
<template>
  <div>
    <header class="header4">
      <button class="icon-button" @click="goBack">
        <img src="../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png" alt="Back" />
      </button>
      <button class="icon-button" @click="openMessages">
        <Bell style="font-size: 20px" />
      </button>
    </header>

    <el-form :model="ruleForm">
      <a-radio-group name="radioGroup" :default-value="radioDefaultValue">
        <el-form-item label="设置自动回复" prop="delivery" label-width="150px">
          <el-switch v-model="ruleForm.delivery" />
        </el-form-item>
        <el-form-item label="正在忙，稍后为你解答!" prop="audio" label-width="220px">
          <a-radio :value="1" />
        </el-form-item>
        <el-form-item label="请先详细描述下您的情况!" prop="QK" label-width="235px">
          <a-radio :value="2" />
        </el-form-item>
        <el-form-item
          label="我每天下午 5:00 - 7:00 之间有空,将会在那个时间段回复您。"
          prop="opened"
          label-width="270px"
        >
          <a-radio :value="3" />
        </el-form-item>
        <el-form-item label="自定义" prop="color" label-width="101px">
          <a-radio :value="4" />
        </el-form-item>
        <div class="autoFooter">
          <p class="autoFooter-title">
            我每天下午 5：00 - 7：00 之间有空，将会在那个时间段回复。
          </p>
        </div>
      </a-radio-group>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Bell from "../../../components/Bell.vue";

import {
  Form as ElForm,
  FormItem as ElFormItem,
  RadioGroup as ARadioGroup,
  Radio,
  Switch,
} from "ant-design-vue";

const ruleForm = ref({
  delivery: false,
  audio: false,
  QK: false,
  opened: false,
  color: false,
});

const radioDefaultValue = ref(1);
const router = useRouter();
function goBack() {
  router.go(-1);
}
const openMessages = () => {
  router.push("/Message");
};
</script>

<style>
.header4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  height: 40px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.icon-button img {
  width: 24px;
  height: 24px;
}

/* Custom style for form item */
.el-form-item {
  display: flex;
  align-items: center;
}

.el-form-item__label {
  width: 320px;
  height: 40px;
  font-size: 16px;
  padding-left: 41px;
  margin-top: 10px;
}
.el-form {
  width: 500px;
  height: 500px;
  margin-right: 10px;
}

.el-switch {
  margin-left: auto;
}
p {
  line-height: 25px;
  font-size: 16px;
}
.custom-form-item {
  display: flex;
  justify-content: space-between; /* 将子元素对齐到两侧 */
  align-items: center; /* 垂直居中对齐子元素 */
}

.label-text {
  flex: 1; /* 使文本占据剩余空间 */
  text-align: left; /* 文本左对齐 */
}

.radio-group {
  display: flex; /* 确保单选框水平排列 */
  gap: 10px; /* 单选框之间的间距（可选） */
}

.el-switch.is-checked .el-switch__core {
  background-color: blue; /* 修改开关为蓝色 */
}

.el-switch.is-checked .el-switch__button {
  background-color: blue; /* 修改滑块为蓝色 */
}

/* 如果需要调整滑块未选中时的颜色 */
.el-switch .el-switch__core {
  background-color: #dcdfe6; /* 修改未选中状态下的颜色 */
}
.autoFooter {
  width: 80%;
  border: 1px solid #ccc;
  margin-left: 10%;
  border-radius: 15px;
}
.autoFooter-title {
  line-height: 25px;
  max-width: 500px;
  word-wrap: break-word;
  margin-left: 10%;
}
</style>
